<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="front-common :: commonCss(~{::title},~{},~{},~{::style})">
    <title>JAVA课程在线考试</title>
    <style type="text/css">
        .container{
            display: flex;
            justify-content: center;
            align-items: flex-start;
            border: #f8f8f8 30px solid;
            padding: 0;
        }
        .content{
            background-color: #ffffff;
            float: right;
            min-height: 75vh;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">

    <div th:replace="front-common::header('grade')"></div>

    <div class="layui-layout-body" style="margin-top: 50px;background-color: #f8f8f8;">
        <div class="layui-container container">
            <div th:replace="front-common::gradeSide('grade')"></div>
            <div class="content">
                <div class="layui-fluid" >
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                        <legend>我的成绩</legend>
                    </fieldset>

                    <div class="layui-card">
                        <form class="layui-form layui-card-header" lay-filter="jobInfoForm" id="jobInfoForm" style="padding: 15px;height: auto">
                            <div class="layui-form-item" style="margin-bottom: 0">
                                <div style="width: 30%" class="layui-inline">
                                    <input style="width: 100%" class="layui-input" id="search-title" autocomplete="off" placeholder="考试标题">
                                </div>

                                <div style="width: 40%" class="layui-inline">
                                    <input style="width: 100%" type="text" id="search-createTime" placeholder="完成时间" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-inline" style="float: right;">
                                    <button type="button" class="layui-btn" id="searchBtn">
                                        <i class="layui-icon layui-icon-search"></i> 搜索
                                    </button>
                                </div>
                            </div>
                        </form>

                        <div class="layui-card-body">
                            <div style="padding-bottom:10px;">
                                <table class="layui-hide" id="gradeTable" lay-skin="line" lay-filter="gradeTable">
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div th:replace="front-common::footer"></div>
    </div>

</div>

<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="history">查看试卷</a>
</script>
<script th:inline="javascript">
    layui.use(['laydate','table','form'], function() {
        var laydate = layui.laydate;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;


        laydate.render({
            elem: '#search-createTime'
            ,type: 'datetime'
            ,range: true
        });


        var tableIns = table.render({
            elem: '#gradeTable'
            , url: '/grade/listForPage'
            , toolbar: '#toolbar'
            , contentType: 'application/json'
            , method: 'post'
            , where: {
                "msg": "",
                "code": "",
                "data": {
                    "id": [[${userInfo.id}]],
                    "title": $('#search-title').val(),
                    "startTime": $("#search-createTime").val().split(" - ")[0],
                    "endTime": $("#search-createTime").val().split(" - ")[1] != null ? $("#search-createTime").val().split(" - ")[1] : ""
                }
            }
            , defaultToolbar: []
            , page: true
            , limits: [5, 10, 20]
            , limit: 10
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    , {field: 'id', title: 'ID', hide: true}
                    , {field: 'userId', title: 'userId', hide: true}
                    , {field: 'examId', title: 'examId', hide: true}
                    , {field: 'title', title: '考试名'}
                    , {field: 'attendTime', title: '开始时间'}
                    , {field: 'finishTime', title: '完成时间'}
                    , {field: 'userScore', title: '成绩'}
                    , {field: 'finishFlag', title: '完成状态', templet: function (d) {
                        var type = d.finishFlag;
                        if(type===0){
                            return '<span style="color:green">答题中</span>';
                        }else if(type===1){
                            return '<span>待批卷</span>';
                        }else if(type===2){
                            return '<span>已完成</span>';
                        }else if(type===-1){
                            return '<span style="color:red">未参加</span>';
                        }
                    }}
                    , {title: '操作', fixed: 'right', width: 135, toolbar: '#bar'}
                ]
            ]
            ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.result.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }
        });

        table.on('tool(gradeTable)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'history':history(data.examId);break;
            };
        });

        $("#searchBtn").click(function (){
            tableIns.reload( {
                where: {
                    "msg": "",
                    "code": "",
                    "data": {
                        "id": [[${userInfo.id}]],
                        "title": $('#search-title').val(),
                        "startTime": $("#search-createTime").val().split(" - ")[0],
                        "endTime": $("#search-createTime").val().split(" - ")[1] != null ? $("#search-createTime").val().split(" - ")[1] : ""
                    }
                }
                ,page: {
                    curr: 1
                }
            });
        });


        function history(id){
            window.location.href="/record/history/"+id;
        }
    })

</script>
</body>

</html>